
import GridConf from "@/core/GridConf";
import StructElementMgr from "../StructElement/StructElementMgr";
import { IStructInitInfo } from "../StructElement/type";
import {registryDropEvent} from "./events"
export let currentGridInfo = {
    gridWidth:0,
    gridHeight:0
};
let currentShowArea = {
    top:0,
    left:0,
    width:0,
    height:0,
}
const SplitLineWidth = 1;
const SplitLineColor = "#aaa";
const SplitSubLineColor="#eee";
// const ShadowBackgroundColor = "#f00";
const ShadowBackgroundColor = "#e5ecff";
export default class PlayGroundCanvas{
    private container:HTMLElement;
    private canvasElement:HTMLCanvasElement;
    private canvasContext:CanvasRenderingContext2D | null ;
    private playgroundWidth:number = 0;
    private playgroundHeight:number = 0;
    private lineColor:string = SplitLineColor;
    
    private girdLayer:HTMLCanvasElement;
    private shadowLayer:HTMLCanvasElement;
    private shadowContext:CanvasRenderingContext2D | null ;
    constructor(container:HTMLElement,playGroundWidth:number=1920,playGroundHeight:number=1080){
        this.container = container;
        this.container.style.width = playGroundWidth+'px';
        this.container.style.height = playGroundHeight+'px';
        this.canvasElement = document.createElement("canvas");
        this.girdLayer = document.createElement("canvas");
        this.shadowLayer = document.createElement("canvas");
        this.canvasContext = this.canvasElement.getContext("2d");
        this.shadowContext = this.shadowLayer.getContext("2d");
        this.initPlayGround();
    }
    private initPlayGround(){
        this.playgroundWidth = this.container.offsetWidth;
        this.playgroundHeight = this.container.offsetHeight;
        // this.canvasElement.setAttribute("draggable", "true");
        this.canvasElement.setAttribute("width", this.playgroundWidth + 'px');
        this.canvasElement.setAttribute("height", this.playgroundHeight + 'px');

        this.girdLayer.setAttribute("width", this.playgroundWidth + 'px');
        this.girdLayer.setAttribute("height", this.playgroundHeight + 'px');

        this.shadowLayer.setAttribute("width", this.playgroundWidth + 'px');
        this.shadowLayer.setAttribute("height", this.playgroundHeight + 'px');
        let gridWidth:number =  this.playgroundWidth / GridConf.widthGridNum,
            gridHeight:number = this.playgroundHeight / GridConf.heightGridNum;
        currentGridInfo = {
            gridWidth,
            gridHeight
        }
        // const self = this;
        this.container.appendChild(this.canvasElement);
        registryDropEvent.bind(this)(this.container);
        this.draw();
    }
    createStructByDrop(structInfo:IStructInitInfo){
        StructElementMgr.getInstance().createElement(structInfo,this.container,this);
    }
    undoShadowStyle(){
        if(currentShowArea.left == 0){
            return;
        }
        if(!this.shadowContext)
            return;
        try{
            this.shadowContext.clearRect(0, 0, this.playgroundWidth, this.playgroundWidth);
            // this.publishPlayGround();
        }catch(ex){
            console.error(ex)
        }
    }
    getPlayGroundSize(){
        return {
            width: this.playgroundWidth,
            height:this.playgroundHeight
        }
    }
    addShadowStyle(left:number,top:number,width:number,height:number){
        if(currentShowArea.top != top || currentShowArea.left != left || currentShowArea.width != width || currentShowArea.height != height){
            this.undoShadowStyle()
        }
        //清空待重回区域
        currentShowArea = {
            top,
            left,
            width,
            height
        }
        console.log(currentGridInfo);
        if(!this.shadowContext)
            return;
        const leftLocation = left * currentGridInfo.gridWidth + SplitLineWidth,
            topLocation = top * currentGridInfo.gridHeight + SplitLineWidth,
            areaWith = width * currentGridInfo.gridWidth-2,
            areaHeight = height * currentGridInfo.gridHeight-2;
        this.shadowContext.fillStyle = ShadowBackgroundColor;
        this.shadowContext.fillRect(leftLocation, topLocation, areaWith, areaHeight);
        // this.shadowContext.fill();
        this.publishPlayGround();
    }
    private publishPlayGround(){
        this.canvasContext?.clearRect(0, 0, this.playgroundWidth,this.playgroundHeight);
        this.canvasContext?.drawImage(this.shadowLayer,0,0,this.playgroundWidth,this.playgroundHeight);
        this.canvasContext?.drawImage(this.girdLayer,0,0,this.playgroundWidth,this.playgroundHeight);

    }
    draw(startTop:number = 0,startLeft:number = 0){
        const gridContext = this.girdLayer.getContext("2d");
        if(!gridContext){
            return;
        }
        const areaReDraw = (startTop!=0 && startLeft!=0);
        // if(!areaReDraw) return;
        
        // gridContext.strokeStyle = this.lineColor;
        // gridContext.lineWidth = SplitLineWidth;
        const startXLocation = startLeft*currentGridInfo.gridWidth;
        const startYLocation = startTop*currentGridInfo.gridHeight;
        const endXLocation = !areaReDraw ? this.playgroundWidth : (startLeft+currentShowArea.width)*currentGridInfo.gridWidth;
        const endYLocation = !areaReDraw ? this.playgroundHeight : (startTop+currentShowArea.height)*currentGridInfo.gridHeight;
        for (var i = startXLocation; i <= endXLocation; i += currentGridInfo.gridWidth) {
            gridContext.strokeStyle = this.lineColor;
            gridContext.lineWidth = SplitLineWidth;
            gridContext.beginPath();
            gridContext.moveTo(i, startTop*currentGridInfo.gridHeight);
            gridContext.lineTo(i,
                !areaReDraw ?
                this.playgroundHeight :
                currentShowArea.height*currentGridInfo.gridHeight + startTop*currentGridInfo.gridHeight);
            gridContext.stroke();
                
            for(let j=i;j<i+currentGridInfo.gridWidth;j+=currentGridInfo.gridWidth/5){
                gridContext.strokeStyle = SplitSubLineColor;
                gridContext.lineWidth = SplitLineWidth/2;
                gridContext.beginPath();
                gridContext.moveTo(j, startTop*currentGridInfo.gridHeight);
                gridContext.lineTo(j,
                    !areaReDraw ?
                    this.playgroundHeight :
                    currentShowArea.height*currentGridInfo.gridHeight + startTop*currentGridInfo.gridHeight);
                gridContext.stroke();
            }
        }

        // SplitSubLineColor
        for (var i = startYLocation; i <= endYLocation; i += currentGridInfo.gridHeight) {
            gridContext.strokeStyle = this.lineColor;
            gridContext.lineWidth = SplitLineWidth;
            gridContext.beginPath();
            gridContext.moveTo(startLeft*currentGridInfo.gridWidth, i);
            gridContext.lineTo(
                !areaReDraw ?
                this.playgroundWidth :
                currentShowArea.width*currentGridInfo.gridWidth+startLeft*currentGridInfo.gridWidth, i);
            gridContext.stroke();

            for(let j=i;j<i+currentGridInfo.gridHeight;j+=currentGridInfo.gridHeight/5){
                gridContext.strokeStyle = SplitSubLineColor;
                gridContext.lineWidth = SplitLineWidth/2;
                gridContext.beginPath();
                gridContext.moveTo(startLeft*currentGridInfo.gridWidth,j);
                gridContext.lineTo(
                    !areaReDraw ?
                    this.playgroundWidth :
                    currentShowArea.width*currentGridInfo.gridWidth+startLeft*currentGridInfo.gridWidth,j);
                gridContext.stroke();
            }
        }
        this.publishPlayGround();
    }


}